<!--
    @ author:小恶魔
    @ datetime: 2020-7-26
 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的财富信息</title>

    <link rel="stylesheet" href="/static/logistics/css/bootstrap4.5.css">
    <link rel="stylesheet" href="/static/admin/lib/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
<!-- 头部文件 -->
<div th:replace="~{/logistics/header::html}"></div>
<div class="bg-light" id="fortuneMessApp">
    <div class="container">
        <div class="row">
            <!-- 面包屑导航 -->
            <div th:replace="~{/logistics/navigation::html}"></div>

            <div class="col-sm-12 p-3 rounded" style="background-color: white;">
                <div class="row p-2">
                    <div class="col-sm-12">
                        <p><img src="/static/logistics/home/img/member.png">会员等级</p>
                        <hr class="my-4 text-secondary">
                    </div>
                    <div class="col-sm-4 border-right">

                        <div class="card m-auto" style="width: 18rem;height: 206px;border: 0px;" >
                            <div style="width: 20%;margin:20px auto 0">
                                <img src="/static/admin/images/face/2ee15b18-64a0-42fc-9a4d-0cd3170bfb78.jpeg" class="card-img-top" alt="..." style="border-radius:100%; ">
                            </div>

                            <div class="card-body text-center">
                                <h5 class="card-title">余额：10</h5>
                                <p class="card-text">
                                    <a href="/">
                                        <span class="text-warning">积分：20</span>
                                    </a>
                                </p>
                                <a href="#" class="btn btn-sm btn-outline-warning">积分兑换</a>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-8">

                        <ul class="list-group">
                            <li class="list-group-item border-0">当前等级： 大众会员</li>
                            <li class="list-group-item border-0">经验值： <span class="text-warning">20</span></li>
                            <li class="list-group-item border-0">距离升级黄金会员还需经验： 1980</li>
                            <li class="list-group-item border-0">经验值=
                                <span class="btn btn-outline-warning">寄件</span> <i class="fa fa-plus"></i>
                                <span class="btn btn-outline-warning">物流评价</span> <i class="fa fa-plus"></i>
                                <span class="btn btn-outline-warning">主动注册</span> <i class="fa fa-plus"></i>
                                <span class="btn btn-outline-warning">完善资料</span> <i class="fa fa-minus"></i>
                                <span class="btn btn-outline-warning">过期经验值</span>
                            </li>
                            <li class="list-group-item border-0">
                                <button type="button" class="btn btn-warning">余额充值</button>
                                <button type="button" class="btn btn-warning" @click="integralInfo">积分介绍</button>
                            </li>
                        </ul>


                    </div>

                </div>


            </div>


        </div>
        <!-- 积分管理 -->
        <div class="row mt-4 rounded" style="background-color: white;">

            <div class="col-sm-12 p-3">

                <div class="row p-2">

                    <div class="col-sm-12">
                        <p><img src="/static/logistics/home/img/integral.png">积分管理</p>
                        <hr class="my-4 text-secondary">
                    </div>
                    <div class="col-sm-3 border-right text-center">
                        <a href="javascript:void (0);" class="text-dark" @click="openIntegralDetail">
                            <img src="/static/logistics/home/img/jifen@2x.416efde.png">
                            <p class="">积分明细</p>
                        </a>
                    </div>
                    <div class="col-sm-3 border-right text-center">
                        <a href="javascript:void (0);" class="text-dark" @click="openMyCouponModal">
                            <img src="/static/logistics/home/img/shangcheng@2x.dc0eb0c.png">
                            <p class="">我的抵用卷</p>
                        </a>
                    </div>
                    <div class="col-sm-3 border-right text-center">
                        <a href="/logistics/integraMall" class="text-dark">
                            <img src="/static/logistics/home/img/diyongquan@2x.115acb0.png">
                            <p class="">积分商城</p>
                        </a>
                    </div>
                    <div class="col-sm-3 text-center">
                        <a href="javascript:void(0);" class="text-dark">
                            <img src="/static/logistics/home/img/choujiang@2x.55995ab.png">
                            <p class="">积分抽奖</p>
                        </a>
                    </div>


                </div>

            </div>

        </div>
    </div>

    <!-- 积分介绍的模态框 -->
    <div class="modal fade" id="integralModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">如何获取积分？</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12 text-center pt-2 pb-2">
                            <span class="text-secondary">经验值获取方式：用户通过寄件、参与活动、购物等行为获取经验值，经验值与积分无对等关系。</span>
                        </div>
                        <div class="col-sm-12">

                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th scope="col">获取方式</th>
                                    <th scope="col">经验值规则</th>
                                    <th scope="col">经验值有效期</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td scope="row">寄件</td>
                                    <td>10经验值/票(每日赠送10次)</td>
                                    <td rowspan="4" class="text-wrap" style="width: 20rem;">
                                        <span >
                                            每年12月31日24:00自动清理1年前获取的经验值；
                                            例：2017年12月31日24:00开始清零的过期经验值是2016年
                                            1月1日-2016年12月31日期间获取的经验值；
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td scope="row">物流评价</td>
                                    <td>10经验值/次(每月赠送3次)</td>
                                </tr>
                                <tr>
                                    <td scope="row">主动注册</td>
                                    <td >100经验值</td>
                                </tr>
                                <tr>
                                    <td scope="row">完善资料</td>
                                    <td >20经验值</td>
                                </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 积分介绍的模态框 -->
    <div class="modal fade" id="integralDetailModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel2">积分明细</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6">

                            <table class="table">
                                <thead>
                                <tr>
                                    <th scope="col">积分明细</th>
                                    <th scope="col">积分类型</th>
                                    <th scope="col">日期</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(integral,index) in integralDeail">
                                    <td>{{integral.integralNumber}}</td>
                                    <td>
                                        {{integral.integralTypeName}}
                                        <span class="ml-2 text-success" v-if="integral.addOrSubtract == 1">增加积分</span>
                                        <span class="ml-2 text-danger" v-if="integral.addOrSubtract == 0">减少积分</span>
                                    </td>
                                    <td>{{integral.createTime}}</td>
                                </tr>
                                </tbody>
                            </table>

                        </div>
                        <div class="col-sm-6">

                            <div data-v-0274cd2b="" class="regular"><h2 data-v-0274cd2b="">积分奖励规则：</h2>
                                <h3 data-v-0274cd2b="">一、积分奖励规则</h3>
                                <p data-v-0274cd2b="">1.注册积分：新用户注册赠送100积分，完善资料赠送20积分；</p>
                                <p data-v-0274cd2b="">
                                    2.寄件积分：选择预约寄件，网点签收成功，赠送发件人15积分/票（同省）、20积分/票（跨省）、特殊时效产品除外，每日赠送10次；</p>
                                <p data-v-0274cd2b="">3.物流评价积分：赠送评价方10积分/票，每月赠送3次。</p>
                                <h3 data-v-0274cd2b="">二、积分有效期</h3>
                                <p data-v-0274cd2b="">1.每年12月31日24:00自动清理1年前获取的积分值；</p>
                                <p data-v-0274cd2b="">
                                    2.积分的使用顺序按照积分获取时间由远及近，直至客户使用完所有可用积分。积分使用到期30天前提醒用户消费积分，过期后积分清零。</p></div>

                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>

    <!-- 我的抵用券的模态框 -->
    <div class="modal fade" id="myCouponModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel3">我的抵用券</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-4 mt-2" v-for="(coupon,index) in couponList">
                            <div class="card bg-dark text-white border-0" :style="coupon.verify == 1 ? 'background: linear-gradient(to left, #AE80FF, #E71ADF);': 'background: linear-gradient(to left, #A7A7A7, #D5D5D5);'" >
                                <div class="card-body">
                                    <span class="pull-right" v-if="coupon.verify == 0">已使用</span>
                                    <span class="pull-right" v-if="coupon.verify == 1">未使用</span>
                                    <h2>￥{{coupon.discount}}</h2>
                                    <h2>{{coupon.name}}</h2>
                                    <span>满{{coupon.fullSubtract}}可使用</span>
                                </div>
                            </div>
                        </div>
                    </div>



                </div>
            </div>
        </div>
    </div>

</div>


<div th:replace="~{/logistics/footer::html}"></div>
<script src="/static/logistics/js/jquery-2.2.4.js"></script>
<script src="/static/logistics/gijgo-combined-1.9.13/js/gijgo.min.js" type="text/javascript"></script>

<script src="/static/logistics/js/bootstrap4.5.js"></script>
<script src="/static/logistics/js/vue.js"></script>
<script src="/static/logistics/js/axios.min.js"></script>
<script src="/static/logistics/home/js/fortuneMess.js"></script>
</body>
</html>
